<script setup>
  const props = defineProps({
    data: [Object],
  })

  const src = computed(() => {
    // 判断data.img 是否含有http
    if (props.data.img && !props.data.img.includes('http')) {
      return './worker/' + props.data.img
    }
    return props.data.img
  })
</script>

<template>
  <div v-if="data" class="relative bg-indigo-500/5 rounded flex items-center justify-center overflow-hidden ring-1 ring-white/5">
    <template v-if="data.img">
      <img :src="src" class="max-w-[80vw] max-h-[80vh] min-h-[50vh] object-contain rounded" />
    </template>
    <template v-else>
      <span class="w-full h-full flex items-center justify-center text-xl">{{ data.name }}</span>
    </template>
    <div class="absolute text-white/10 bg-black/10 p-1 bottom-0 w-full text-center text-sm opacity-0">{{ data.name }}</div>
  </div>
</template>
